<template>
  <div class="home fade-in">
    <div class="tech-background">
      <canvas ref="particleCanvas" class="particle-canvas"></canvas>
    </div>
    <div class="container">
      <div class="logo-container">
        <div class="logo-circle">
          <span class="logo-text">AI</span>
        </div>
      </div>
      <h1 class="page-title">AI智能助手平台</h1>
      <p class="subtitle">探索AI的无限可能，为您的工作和生活提供智能支持</p>
      
      <div class="app-cards">
        <el-card class="app-card" shadow="hover" @click="navigateTo('jobAssistant')">
          <div class="app-card-content">
            <el-icon :size="50" color="#41b4ff"><UserFilled /></el-icon>
            <h2>AI求职小助手</h2>
            <p>帮助您准备面试、优化简历、提供求职建议</p>
            <div class="card-footer">
              <el-button type="primary" class="enter-btn">开始使用</el-button>
            </div>
          </div>
        </el-card>
        <el-card class="app-card" shadow="hover" @click="navigateTo('superAgent')">
          <div class="app-card-content">
            <el-icon :size="50" color="#7370ff"><Operation /></el-icon>
            <h2>AI超级智能体</h2>
            <p>更强大的智能助手，可以帮助解决各种复杂问题</p>
            <div class="card-footer">
              <el-button type="primary" class="enter-btn">开始使用</el-button>
            </div>
          </div>
        </el-card>
      </div>
      
      <div class="footer">
        <p>© 2025 AI智能助手平台 · 智能交互的未来</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { UserFilled, Operation } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const particleCanvas = ref(null)

const navigateTo = (routeName) => {
  router.push({ name: routeName })
}

// 粒子动画
onMounted(() => {
  const canvas = particleCanvas.value
  if (!canvas) return
  const ctx = canvas.getContext('2d')
  let width = window.innerWidth
  let height = window.innerHeight
  canvas.width = width
  canvas.height = height
  let particles = []
  const PARTICLE_NUM = 60
  for (let i = 0; i < PARTICLE_NUM; i++) {
    particles.push({
      x: Math.random() * width,
      y: Math.random() * height,
      r: Math.random() * 2 + 1,
      dx: (Math.random() - 0.5) * 0.7,
      dy: (Math.random() - 0.5) * 0.7,
      alpha: Math.random() * 0.5 + 0.3
    })
  }
  function draw() {
    ctx.clearRect(0, 0, width, height)
    for (let p of particles) {
      ctx.save()
      ctx.globalAlpha = p.alpha
      ctx.beginPath()
      ctx.arc(p.x, p.y, p.r, 0, 2 * Math.PI)
      ctx.fillStyle = '#41b4ff'
      ctx.shadowColor = '#41b4ff'
      ctx.shadowBlur = 10
      ctx.fill()
      ctx.restore()
      p.x += p.dx
      p.y += p.dy
      if (p.x < 0 || p.x > width) p.dx *= -1
      if (p.y < 0 || p.y > height) p.dy *= -1
    }
    requestAnimationFrame(draw)
  }
  draw()
  window.addEventListener('resize', () => {
    width = window.innerWidth
    height = window.innerHeight
    canvas.width = width
    canvas.height = height
  })
})
</script>

<style scoped>
.home {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.fade-in {
  animation: fadeIn 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

.tech-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
  z-index: -2;
}

.particle-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
}

.tech-background::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  z-index: -1;
}

.logo-container {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.logo-circle {
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg, #41b4ff, #7370ff);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 20px rgba(65, 180, 255, 0.3);
}

.logo-text {
  font-size: 40px;
  font-weight: bold;
  color: white;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.page-title {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 10px;
  background: linear-gradient(to right, #41b4ff, #7370ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
}

.subtitle {
  font-size: 1.2rem;
  color: #e0e0e0;
  margin-bottom: 40px;
  text-align: center;
}

.app-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  margin-top: 20px;
}

.app-card {
  width: 320px;
  height: 300px;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), box-shadow 0.3s, filter 0.3s;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(65, 180, 255, 0.08);
}

.app-card:hover {
  transform: scale(1.07) translateY(-16px) rotateZ(-2deg);
  box-shadow: 0 20px 40px 10px rgba(65, 180, 255, 0.25), 0 1.5px 8px rgba(115, 112, 255, 0.18);
  filter: brightness(1.1) saturate(1.2);
}

.app-card :deep(.el-card__body) {
  padding: 0;
  height: 100%;
}

.app-card-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 25px;
  color: #fff;
  background: linear-gradient(135deg, rgba(32, 58, 67, 0.8), rgba(44, 83, 100, 0.8));
}

.app-card h2 {
  margin: 20px 0 15px;
  color: #41b4ff;
  font-size: 1.5rem;
}

.app-card p {
  color: #e0e0e0;
  margin-bottom: 25px;
}

.card-footer {
  margin-top: auto;
  width: 100%;
}

.enter-btn {
  width: 100%;
  background: linear-gradient(to right, #41b4ff, #7370ff);
  border: none;
}

.enter-btn:hover, .enter-btn:focus {
  background: linear-gradient(to right, #7370ff, #41b4ff);
  opacity: 0.9;
  border: none;
}

.footer {
  margin-top: 60px;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
}
</style> 